window.addEventListener("load", async function () {
  try {
    const res = await axios({
      url: "/dashboard",
    });
    console.log(res.data);

    // ?遍历基本信息
    for (const k in res.data.overview) {
      document.querySelector(`[name=${k}]`).innerHTML = res.data.overview[k];
    }

    // ?解构 res.data 里面的数据
    const { year, groupData, salaryData, provinceData } = res.data;

    //? 12 个月份工资走势图
    function salaryEcharts(year) {
      var myChart = echarts.init(document.querySelector("#line"));
      const option = {
        title: {
          text: "2022全学科薪资走势图",
          left: "2%",
          top: "2%",
        },
        xAxis: {
          type: "category",
          data: year.map((v) => v.month),
          axisTick: {
            alignWithLabel: true,
          },
          axisLine: {
            lineStyle: {
              type: "dashed",
              color: "#999",
            },
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            lineStyle: {
              type: "dashed",
            },
          },
        },
        tooltip: {
          trigger: "axis",
        },
        series: [
          {
            data: year.map((v) => v.salary),
            type: "line",
            smooth: true,
            symbolSize: "10",
            lineStyle: {
              width: 4,
            },
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "skyblue", // 0% 处的颜色
                  },
                  {
                    offset: 0.6,
                    color: "#fff", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
        ],
        color: ["blue"],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
    salaryEcharts(year);

    // ?班级各个小组薪资分布走势图
    function groupSalary(groupData) {
      var myChart = echarts.init(document.querySelector("#lines"));
      const option = {
        title: {},
        xAxis: {
          type: "category",
          data: groupData[1].map((v) => v.name),
          axisTick: {
            alignWithLabel: true,
          },
          axisLine: {
            lineStyle: {
              type: "dashed",
              color: "#999",
            },
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            lineStyle: {
              type: "dashed",
            },
          },
        },
        tooltip: {
          trigger: "axis",
        },
        series: [
          {
            data: groupData[1].map((v) => v.hope_salary),
            type: "bar",
            smooth: true,
          },
          {
            data: groupData[1].map((v) => v.salary),
            type: "bar",
            smooth: true,
            symbolSize: "10",
          },
        ],
        color: [
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#43d4a1", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#cff5e7", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#4fa2ee", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#d1e6fa", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      // 获取所有的按钮，得到一个伪数组
      const btns = document.querySelectorAll("#btns button");
      // 遍历给这个伪数组添加点击事件
      btns.forEach((item) => {
        item.addEventListener("click", function () {
          // 排他思想
          document
            .querySelector("#btns .btn-blue")
            .classList.remove("btn-blue");
          this.classList.add("btn-blue");
          const index = item.innerHTML.trim();
          option.xAxis.data = groupData[index].map((v) => v.name);
          option.series[0].data = groupData[index].map((v) => v.hope_salary);
          option.series[1].data = groupData[index].map((v) => v.salary);
          // 需要调用 myChart.setOption(option) 再次渲染一次页面
          myChart.setOption(option);
        });
      });
    }
    groupSalary(groupData);

    // ?班级薪资分布饼状图
    function salaryClass(salaryData) {
      var myChart = echarts.init(document.querySelector("#salary"));
      const data = salaryData.map((v) => {
        return {
          value: v.g_count + v.b_count,
          name: v.label,
        };
      });
      const option = {
        title: {
          text: "班级薪资分布图",
          top: "2%",
          left: "2%",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          bottom: "5%",
          left: "center",
        },
        series: [
          {
            name: "班级薪资分布图",
            type: "pie",
            radius: ["40%", "50%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: data,
          },
        ],
        color: ["#fda224", "#5097ff", "#3fceff", "#34d39a"],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
    salaryClass(salaryData);

    // ? 男女薪资分布
    function sexSalary(salaryData) {
      var myChart = echarts.init(document.querySelector("#gender"));
      const boydata = salaryData.map((v) => {
        return {
          value: v.b_count,
          name: v.label,
        };
      });
      const girldata = salaryData.map((v) => {
        return {
          value: v.g_count,
          name: v.label,
        };
      });
      const option = {
        title: [
          {
            text: "男女薪资分布",
            top: "2%",
            left: "2%",
          },
          {
            text: "男生",
            left: "center",
            top: "45%",
          },
          {
            text: "女生",
            left: "center",
            top: "85%",
          },
        ],
        series: [
          {
            type: "pie",
            radius: ["25%", "35%"],
            center: ["50%", "30%"],
            data: boydata,
            label: {
              position: "outer",
              alignTo: "none",
              bleedMargin: 5,
            },
          },
          {
            type: "pie",
            radius: ["25%", "35%"],
            center: ["50%", "70%"],
            data: girldata,
            label: {
              position: "outer",
              alignTo: "labelLine",
              bleedMargin: 5,
            },
          },
        ],
        color: ["#fda224", "#5097ff", "#3fceff", "#34d39a"],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
    sexSalary(salaryData);

    // ?地图模块
    const initMapChart = (provinceData) => {
      const myEchart = echarts.init(document.querySelector("#map"));
      const dataList = [
        { name: "南海诸岛", value: 0 },
        { name: "北京", value: 0 },
        { name: "天津", value: 0 },
        { name: "上海", value: 0 },
        { name: "重庆", value: 0 },
        { name: "河北", value: 0 },
        { name: "河南", value: 0 },
        { name: "云南", value: 0 },
        { name: "辽宁", value: 0 },
        { name: "黑龙江", value: 0 },
        { name: "湖南", value: 0 },
        { name: "安徽", value: 0 },
        { name: "山东", value: 0 },
        { name: "新疆", value: 0 },
        { name: "江苏", value: 0 },
        { name: "浙江", value: 0 },
        { name: "江西", value: 0 },
        { name: "湖北", value: 0 },
        { name: "广西", value: 0 },
        { name: "甘肃", value: 0 },
        { name: "山西", value: 0 },
        { name: "内蒙古", value: 0 },
        { name: "陕西", value: 0 },
        { name: "吉林", value: 0 },
        { name: "福建", value: 0 },
        { name: "贵州", value: 0 },
        { name: "广东", value: 0 },
        { name: "青海", value: 0 },
        { name: "西藏", value: 0 },
        { name: "四川", value: 0 },
        { name: "宁夏", value: 0 },
        { name: "海南", value: 0 },
        { name: "台湾", value: 0 },
        { name: "香港", value: 0 },
        { name: "澳门", value: 0 },
      ];

      // *处理数据,因为不需要返回一个新数组，所以用 forEach 就可以
      provinceData.forEach((item) => {
        // 查找 dataList 中有和 provinceData 中 name 值一样的
        // 就把 provinceData的value 赋值给 dataList的value
        dataList.find((v) => {
          // indexOf 查找 provinceData的name 值中是否包含 dataList中的 name值
          // 不包含就返回 -1，我们这里需要的是包含，所以判断不等于 -1
          if (item.name.indexOf(v.name) !== -1) {
            v.value = item.value;
          }
        });
      });

      let option = {
        title: {
          text: "籍贯分布",
          top: 10,
          left: 10,
          textStyle: {
            fontSize: 16,
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{b}: {c} 位学员",
          borderColor: "transparent",
          backgroundColor: "rgba(0,0,0,0.5)",
          textStyle: {
            color: "#fff",
          },
        },
        visualMap: {
          min: 0,
          max: 6,
          left: "left",
          bottom: "20",
          text: ["6", "0"],
          inRange: {
            color: ["#ffffff", "#0075F0"],
          },
          show: true,
          left: 40,
        },
        geo: {
          map: "china",
          roam: false,
          zoom: 1.0,
          label: {
            normal: {
              show: true,
              fontSize: "10",
              color: "rgba(0,0,0,0.7)",
            },
          },
          itemStyle: {
            normal: {
              borderColor: "rgba(0, 0, 0, 0.2)",
              color: "#e0ffff",
            },
            emphasis: {
              areaColor: "#34D39A",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
        series: [
          {
            name: "籍贯分布",
            type: "map",
            geoIndex: 0,
            data: dataList,
          },
        ],
      };
      myEchart.setOption(option);
    };
    initMapChart(provinceData);
    
  } catch (err) {
    console.log(err);
  }
});
